<template>
  <view class="recharge-page">
    <!-- 在线充值标题 -->
    <view class="recharge-title">
      <text class="title-text">在线充值</text>
    </view>

    <!-- 推荐充值卡片 -->
    <view class="featured-card">
      <view class="card-content">
        <text class="amount-text">{{ getDisplayAmount() }}</text>
        <text class="promo-text">充值优惠:额外赠送100000元;赠送100积分;赠送100成长值;赠送2张优惠券【会员赠送代金券、会员赠送折扣券】</text>
      </view>
    </view>

    <!-- 充值金额选择 -->
    <view class="amount-selection">
      <view class="amount-buttons">
        <button class="amount-btn" :class="{ selected: selectedAmount === 0.01 }" @click="selectAmount(0.01)">
          <text class="amount-btn-text">0.01元</text>
        </button>
        <button class="amount-btn" :class="{ selected: selectedAmount === 11 }" @click="selectAmount(11)">
          <text class="amount-btn-text">11元</text>
        </button>
        <button class="amount-btn" :class="{ selected: selectedAmount === 500 }" @click="selectAmount(500)">
          <text class="amount-btn-text">500元</text>
        </button>
      </view>
    </view>

    <!-- 自定义金额 -->
    <view class="custom-amount">
      <text class="custom-label">自定义金额 (元)</text>
      <input 
        class="custom-input" 
        type="number" 
        placeholder="请输入充值金额"
        v-model="customAmount"
        @input="onCustomAmountInput"
      />
      <text class="custom-limit">单次最多可充值10万元</text>
    </view>

    <!-- 支付方式 -->
    <view class="payment-method">
      <view class="payment-item" @click="togglePaymentMethod">
        <view class="payment-left">
          <text class="payment-icon">💚</text>
          <text class="payment-name">微信支付</text>
        </view>
        <view class="payment-right">
          <view class="checkbox" :class="{ checked: isWechatSelected }">
            <text class="checkbox-inner" v-if="isWechatSelected">✓</text>
          </view>
        </view>
      </view>
      <view class="payment-spacer"></view>
    </view>

    <!-- 充值按钮 -->
    <view class="recharge-button-section">
      <button class="recharge-button" @click="handleRecharge">
        <text class="recharge-button-text">充值</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedAmount: 0.01,
      customAmount: '',
      isWechatSelected: true,
      lastPresetAmount: 0.01 // 记录用户最后选择的预设金额
    }
  },
  methods: {
    // 选择充值金额
    selectAmount(amount) {
      this.selectedAmount = amount;
      this.customAmount = ''; // 清空自定义金额
      this.lastPresetAmount = amount; // 更新最后选择的预设金额
    },
    // 自定义金额输入
    onCustomAmountInput(e) {
      const value = e.detail.value;
      if (value && value.trim() !== '') {
        this.selectedAmount = parseFloat(value);
      } else {
        // 当输入框为空时，恢复到默认的预设金额
        this.selectedAmount = this.lastPresetAmount;
      }
    },
    // 切换支付方式
    togglePaymentMethod() {
      this.isWechatSelected = !this.isWechatSelected;
    },
    // 充值逻辑
    handleRecharge() {
      uni.showToast({
        title: `充值${this.selectedAmount}元功能开发中`,
        icon: 'none'
      });
    },
    // 获取显示金额
    getDisplayAmount() {
      if (this.customAmount && this.customAmount.trim() !== '') {
        return '自定义金额';
      }
      return this.selectedAmount + '元';
    }
  }
}
</script>

<style scoped>
/* 页面基础样式 */
.recharge-page {
  min-height: 100vh;
  background-color: #fff;
  padding-bottom: 20px;
}

/* 在线充值标题 */
.recharge-title {
  padding: 20px 16px 16px 16px;
}

.title-text {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

/* 推荐充值卡片 */
.featured-card {
  margin: 0 16px 20px 16px;
  background: linear-gradient(135deg, #ff3838, #ff6b7a);
  border-radius: 12px;
  padding: 24px 20px;
  box-shadow: 0 4px 12px rgba(255, 56, 56, 0.3);
}

.card-content {
  text-align: center;
}

.amount-text {
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  display: block;
  margin-bottom: 12px;
}

.promo-text {
  font-size: 12px;
  color: #fff;
  opacity: 0.9;
  line-height: 1.4;
}

/* 充值金额选择 */
.amount-selection {
  padding: 0 16px 20px 16px;
}

.amount-buttons {
  display: flex;
  gap: 12px;
}

.amount-btn {
  flex: 1;
  background-color: #fff;
  border: 2px solid #f0f0f0;
  border-radius: 8px;
  padding: 16px 12px;
  text-align: center;
  transition: all 0.3s ease;
}

.amount-btn.selected {
  border-color: #ff3838;
}

.amount-btn-text {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.amount-btn.selected .amount-btn-text {
  color: #ff3838;
}

/* 自定义金额 */
.custom-amount {
  padding: 0 16px 20px 16px;
}

.custom-label {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  display: block;
  margin-bottom: 8px;
}

.custom-input {
  width: 100%;
  height: 44px;
  border: 2px solid #f0f0f0;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 16px;
  color: #333;
  background-color: #fff;
  margin-bottom: 8px;
}

.custom-input:focus {
  border-color: #ff3838;
}

.custom-limit {
  font-size: 12px;
  color: #999;
}

/* 支付方式 */
.payment-method {
  padding: 0 16px 20px 16px;
}

.payment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.payment-left {
  display: flex;
  align-items: center;
}

.payment-icon {
  font-size: 20px;
  margin-right: 12px;
}

.payment-name {
  font-size: 16px;
  color: #333;
}

.payment-right {
  display: flex;
  align-items: center;
}

.checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  transition: all 0.3s ease;
}

.checkbox.checked {
  border-color: #ff3838;
  background-color: #ff3838;
}

.checkbox-inner {
  font-size: 14px;
  color: #fff;
  font-weight: bold;
}

.payment-spacer {
  height: 100px;
}

/* 充值按钮 */
.recharge-button-section {
  padding: 0 16px 20px 16px;
}

.recharge-button {
  background-color: #ff3838;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  height: 48px;
  line-height: 24px;
}

.recharge-button:active {
  background-color: #ff2020;
}

.recharge-button-text {
  color: #fff;
}
</style> 